<template>
    <div class="login-container">
        <h2 class="login-title">ToDoList Keep</h2>
        <form @submit.prevent="handleLogin" class="login-form">
            <div class="form-group">
                <input class="input" v-model="username" type="text" placeholder="用户名" required />
            </div>
            <div class="form-group">
                <input class="input" v-model="password" type="password" placeholder="密码" required />
            </div>
            <div class="form-group">
                <button class="buttonLogin" type="submit">登录</button>
                <button class="buttonRegister" type="button">注册</button>
                <button class="buttonSecret" type="button">重置密码</button>
            </div>
            <p v-if="error" class="error">{{ error }}</p>
            <p v-if="success" class="success">{{ success }}</p>
        </form>
    </div>
</template>

<script>
export default {
    name: "Login",
    data() {
        return {
            username: "",
            password: "",
            error: "",
            success: "",
            currentUserInfo: "",
        };
    },
    methods: {
        async handleLogin() {
            try {
                const response = await fetch("http://localhost:3000/api/login", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    body: JSON.stringify({
                        username: this.username,
                        password: this.password,
                    }),
                });

                const data = await response.json();

                if (response.ok) {
                    // 登录成功
                    this.success = "登录成功!";
                    this.error = "";
                    console.log(data.message);
                    // 将当前用户信息存储到 Vuex 中
                    this.$store.commit('setCurrentUserInfo', data.userInfo);
                    // 使用路由跳转到待办事项列表页面
                    this.$router.push({ name: 'ToDoList' });
                } else {
                    // 登录失败
                    this.success = "";
                    this.error = data.message || "登录失败.";
                }
            } catch (err) {
                console.error("Error:", err);
                this.success = "";
                this.error = "服务器错误. 请稍后再试.";
            }
        },
    }
};
</script>

<style scoped>
.login-container {
    max-width: 400px;
    margin: 30px auto;
    padding: 20px;
    background-color: #c48989;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.login-title {
    margin-bottom: 20px;
    color: #2c3e50;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.input {
    background-color: #d7a1a1;
    padding: 10px;
    border: 1px solid #81dfae;
    border-radius: 4px;
    transition: border-color 0.3s ease;
}

.input:focus {
    border-color: #2c3e50;
}

.buttonLogin,
.buttonRegister,
.buttonSecret {
    padding: 10px 20px;
    background-color: #90b7df;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.buttonLogin:hover,
.buttonRegister:hover,
.buttonSecret:hover {
    background-color: #34495e;
}

.error {
    color: red;
}

.success {
    color: green;
}
</style>